This repository has been archived by the owner on Oct 4, 2023. It is now read-only.
[PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats #3815
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
schottra
requested review from
amendelsohn,
piazzatron and
dharit-tan
and removed request for
amendelsohn
|
Preview this change https://demo.audius.co/pay-1660-fix-stats-overlap |
amendelsohn
approved these changes
Jul 28, 2023
|
I see that the reposts and favorites are granted different amounts of space. Is that by design? Maybe can fix the flex grow ratio somehow? |
I noticed this as well. The flex behavior is inside the |
dharit-tan
approved these changes
Jul 28, 2023
| @@ -254,9 +254,15 @@ | |||
| margin-right: var(--unit-20); | |||
| } | |||
|
|
|||
| .small .bottomRight { | |||
| /* Match socialsRow to keep these in line */ | |||
| height: 18px; | |||
schottra
added a commit
that referenced
this pull request
Jul 28, 2023
audius-infra
pushed a commit
that referenced
this pull request
Jul 29, 2023
[5e99303] Add favorite test and fix aria-label (#3817) Raymond Jacobson [ccc32ce] [C-2908 C-2744] fix desktop follow button (#3816) Dylan Jeffers [c0679c3] [PAY-1660] Fix layout issues with TrackTile socials row with a lot of stats (#3815) Randy Schott [089a9e6] Pin stripe package versions (#3813) Reed [a281267] [C-2774] Update upload inputs (#3806) Dylan Jeffers [f504ef9] [C-2901] Fix menu types (#3811) Dylan Jeffers [cb9a385] [C-2905] Update Text types and props to camelCase (#3810) Kyle Shanks [027b3a5] [PAY-1624] Implement Purchase modal (#3808) Randy Schott [deadb5f] [C-2902] Update the upload forms to use the typography component (#3809) Kyle Shanks [039c951] [C-801] Fix oauth nodes (#3807) Raymond Jacobson [c3765c7] Update typography component to use classnames (#3805) Kyle Shanks [cab0a3e] Switch to Stripe package instead of script (#3798) Reed [a84126f] [C-2890] Add first version of a typography component to web (#3796) Kyle Shanks [4addddc] Fix mobile prem-content drawer unlocking margin (#3804) Reed [233b585] [C-2857] Remove get blocknumber (#3802) Dylan Jeffers [d113bdb] Prepare for 1.5.34 full app release (#3801) Dylan Jeffers [2f09db4] [C-2887] Fix collection button widths (#3800) Dylan Jeffers [8158e10] [PAY-1655] Add ColorValue prop to Text component (#3799) Reed [fe4bc6a] Revert cacheActions.add thunk (#3797) Dylan Jeffers [2370bbe] [PAY-1650] Update play/preview buttons on track details to use HarmonyButton (#3795) Randy Schott [3579dc2] [PAY-1651] Implements Harmony Buttons (#3794) Randy Schott [5af77ec] [C-2886] Improve cache performance (#3792) Dylan Jeffers [6fb78f1] [PAY-1587] Mobile USDC Purchase Drawer Skeleton (#3793) Reed [1277a41] [C-2883] Migrate confirmer to common (#3788) Dylan Jeffers [ce2548e] [plat-1111] add usdc purchase seller and buyer notifications (#3770) sabrina-kiam [bc04f52] Fix mobile LockedStatusBadge padding (#3790) Reed [8943078] [C-2680] Attribution Modal (#3778) Andrew Mendelsohn
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The stats row gets large if you happen to be following multiple people which reposted and favorited a track. The styling for the socials row includes a margin to make space for the plays. But it wasn't set up to restrict its content to the available space.
Also for small track tiles, we change the height of the row to 18px, which causes the plays count to be off-center since it is rendered absolutely. There is longer term cleanup needed on the socials row so that the content isn't sized larger than its container and centered. But it wasn't a safe change to make due to the multiple places we use the
Statscomponent. This fixes the display issues for now, and we will address it more fully later.Dragons
N/A
How Has This Been Tested?
Verified locally on Chrome
How will this change be monitored?
N/A
Feature Flags
N/A
Screenshots
Before
After
